<template>
  <view class="container">
    <u-sticky>
      <view class="user-info">
        <view class="left">
          <view class="logo">
            <u-image
              :show-loading="true"
              :src="formatingAvatar(userInfo.interestUser?.headPath)"
              width="80rpx"
              height="80rpx"
              radius="100%"
            ></u-image>
          </view>
          <view class="info">
            <view class="name">{{ userInfo.interestUser?.username }}</view>
            <view class="create-time">
              {{ parseTime(userInfo.interestUser?.checkedTime) }} 阅读

              {{ userInfo.interestUser?.beReadNumber }}</view
            >
          </view>
        </view>
        <!-- <view class="attention">+ 关注</view> -->
      </view>
    </u-sticky>

    <view class="content">
      <van-tabs
        :active="active"
        swipeable
        @click="handleClickActive"
        @change="handleChangeActive"
      >
        <van-tab title="信息">
          <!-- 学院 · 专业 -->
          <view class="college view-row">
            <text class="title">学校</text>
            <u-tag
              text="陕西工业职业技术大学"
              plain
              size="large"
              type="primary"
            ></u-tag>
          </view>

          <view class="college view-row">
            <text class="title">专业</text>
            <view class="options">
              <view>{{ userInfo.institute }} · {{ userInfo.major }}</view>
            </view>
          </view>

          <!-- 感兴趣 -->
          <view class="interest view-row">
            <text class="title">技术栈</text>
            <view class="options">
              <view
                v-for="(item, index) in userInfo.interestUser?.domain"
                :key="index"
                >{{ item }}</view
              >
            </view>
          </view>
        </van-tab>
        <van-tab title="详情">
          <view class="details">
            <view class="weight">个人简介</view>
            <view class="synopsis">
              {{ userInfo.interestUser?.description }}
            </view>
            <view class="certificate">
              <view class="weight">获奖证书</view>
              <!-- 轮播图 -->
              <u-swiper
                previousMargin="30"
                nextMargin="30"
                circular
                :autoplay="true"
                radius="5"
                height="140"
                bgColor="#ffffff"
                :list="userInfo.interestUser?.results"
                @click="
                  formatingAvatar(
                    previewImageList(userInfo.interestUser?.results)
                  )
                "
              ></u-swiper>
            </view>
          </view>
        </van-tab>
        <van-tab title="评论" v-if="false">
          <view class="comment">
            <!-- 无人评论 -->
            <view class="no-comment">
              <u-image
                src="https://img2.baidu.com/it/u=402979643,183727814&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
                width="100rpx"
                height="100rpx"
              ></u-image>

              <view class="await">期待你的评论</view>
              <view class="idea">发条评论表达你的想法</view>

              <view class="go-comment" @click="handleGoComment">去评论</view>
            </view>
          </view>
        </van-tab>
      </van-tabs>

      <!-- 发布评论输入框 -->
      <view class="comment-container" v-if="active == 2">
        <u-input
          placeholder="善语结善缘，恶语伤人心"
          v-model="value"
          @change="change"
          ref="inout"
        ></u-input>

        <view class="submmit">发送</view>
      </view>
    </view>

    <van-goods-action>
      <van-goods-action-icon
        :icon="isShowLike.icon"
        :color="isShowLike.color"
        :text="userInfo.interestUser?.beLikeNumber || '0'"
        @click="handleLike"
      />
      <van-goods-action-icon
        :icon="isShowCollect.icon"
        :color="isShowCollect.color"
        :text="userInfo.interestUser?.beCollectNumber || '0'"
        @click="handleCollect"
      />
      <!-- <van-goods-action-icon icon="cart-o" text="购物车" info="5" /> -->
      <!-- <van-goods-action-button
        color="#0053fb6e"
        text="加入购物车"
        type="warning"
      /> -->
      <van-goods-action-button
        color="#0053FB"
        @click="handleContact"
        text="联系大佬"
      />
    </van-goods-action>
  </view>
</template>

<script setup>
import { previewImageList, makePhoneCall } from "@/utils/tool.js";
import { interest, likeApi, collectApi } from "@/api/home";
import env from "@/utils/env";
import { parseTime, Alert, unAlert, formatingAvatar } from "@/utils/tool";
import { getItem, updateItem } from "@/utils/localStorage";

// 数据
let userInfo = ref({});

let options = null;

onMounted(() => {
  const routes = getCurrentPages(); // 获取当前打开的页面路由数组
  //console.log("routes-router:", routes);
  // console.log("routes：", routes[routes.length - 1].options); // query参数
  options = routes[routes.length - 1].options;
  // console.log("options:", options);
});
// 获取信息数据
onMounted(() => {
  app();
});
const app = async () => {
  const result = await interest(options.thisId);

  console.log("result：", result);

  updateItem("userInfo", "viewHistory", result.data.data.viewHistory);

  // result.data.data.headPath = `${env.baseUrl}/head/${result.data.data.headPath}`;

  // 格式化路径
  // result.data.data.imgPath = result.data.data.imgPath.map((item) => {
  //   return `${env.baseUrl}/result/${item}`;
  // });

  userInfo.value = result.data.data;

  console.log("userInfo：", userInfo.value);
  judgeLikeOrCollect();
};

// 哪一项被选中
const active = ref(0);
// 点击激活
const handleClickActive = (e) => {
  // console.log("点击激活", e);
  active.value = e.detail.index;
};
// 改变激活
const handleChangeActive = (e) => {
  // console.log("改变激活", e);
  active.value = e.detail.index;
};

// 奖项数据
const swiperList = ref([
  `https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8560836d-8856-4c08-a2af-940425f42643%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705949964&t=529bd09d58619d5ce30df8082e25e966`,
  `https://p4.itc.cn/images01/20200612/d989169a0b5c4ff6b1199687819930ac.jpeg`,
  `https://img1.baidu.com/it/u=3590845205,1892690721&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500`,
  "https://www.fjcpc.edu.cn/_upload/article/images/9b/e8/6e31f9fd4915ad7bab8ad871a616/9a034787-d8cf-4f57-a2e7-c10f8a1c6261.jpg",
]);

const isShowLike = ref({
  icon: "like-o",
  color: "",
});
const isShowCollect = ref({
  icon: "star-o",
  color: "",
});
// 初始化喜欢/收藏状态
const judgeLikeOrCollect = () => {
  if (userInfo.value.user.isLike) {
    isShowLike.value = {
      icon: "like",
      color: "red",
    };
  } else {
    isShowLike.value = {
      icon: "like-o",
      color: "",
    };
  }

  if (userInfo.value.user.isCollect) {
    isShowCollect.value = {
      icon: "star",
      color: "#ff8d00",
    };
  } else {
    isShowCollect.value = {
      icon: "star-o",
      color: "",
    };
  }

  console.log("isShowLike：", isShowLike.value);
};
// 添加到我的喜欢
const handleLike = async () => {
  Alert("加载中", "loading", 0, true);
  console.log("userInfo.value.isLike:", Number(!userInfo.value.isLike));
  const result = await likeApi(Number(userInfo.value.interestUser.id));
  console.log("点赞：", result);

  console.log("userInfo:", userInfo.value.user.isLike);

  if (result.data.code == 200) {
    if (!userInfo.value.user.isLike) {
      Alert("点赞成功", "success");
    } else {
      Alert("已取消点赞", "success");
    }

    app();
    updateItem("userInfo", "likeNumber", result.data.data.likeNumber);
    updateItem("userInfo", "collectNumber", result.data.data.collectNumber);
    updateItem(
      "userInfo",
      "viewHistory",
      result.data.data.ownViewHistoryNumber
    );
  }
};
// 添加到我的收藏
const handleCollect = async () => {
  Alert("加载中", "loading", 0, true);
  const result = await collectApi(Number(userInfo.value.interestUser.id));
  console.log("收藏：", result);

  if (result.data.code == 200) {
    if (!userInfo.value.user.isCollect) {
      Alert("收藏成功", "success");
    } else {
      Alert("已取消收藏", "success");
    }

    app();
    updateItem("userInfo", "likeNumber", result.data.data.likeNumber);
    updateItem("userInfo", "collectNumber", result.data.data.collectNumber);
    updateItem(
      "userInfo",
      "viewHistory",
      result.data.data.ownViewHistoryNumber
    );
  }
};

const value = ref("");

const inout = ref(null);

onMounted(() => {
  console.log("inout：", inout);
});

const change = (e) => {
  console.log("change", e);
};
// 去评论
const handleGoComment = () => {
  nextTick(() => {
    inout.value.focus();
  });
};

// 联系大佬
const handleContact = () => {
  makePhoneCall(userInfo.value.interestUser.phone);
};
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.weight {
  font-size: 36rpx;
  font-weight: 900;
  margin: 20rpx 0 15rpx;
}
.container {
  width: 750rpx;
  min-height: 100vh;
  background-color: #fff;
  box-shadow: 0 0 30rpx #cfcfcf inset;
  padding: 20rpx 40rpx;

  .user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      .info {
        padding-left: 30rpx;

        .name {
          font-size: 32rpx;
        }

        .create-time {
          font-size: 26rpx;
          color: #8b8b8d;
        }
      }
    }

    .attention {
      background-color: #e9f3fc;
      color: #257df3;
      padding: 10rpx 20rpx;
      border-radius: 6rpx;
    }
  }

  .content {
    background-color: #fff;
    box-shadow: 0 0 30px #ddd;
    border-radius: 20rpx;
    overflow: hidden;
    margin-top: 30rpx;
    // min-height: 800rpx;
    min-height: 77vh;
    position: relative;

    .view-row {
      padding: 15rpx 40rpx;
      .title {
        font-size: 36rpx;
        font-weight: 900;
        margin: 20rpx 0;
      }
    }

    .interest {
      .title {
        font-size: 36rpx;
        font-weight: 900;
        margin: 20rpx 0;
      }

      .options {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20rpx;

        view {
          padding: 5rpx 14rpx;
          background-color: #f5f6fa;
          margin-right: 16rpx;
          color: #9e9da0;
          font-size: 22rpx;
          border-radius: 10rpx;
          margin-bottom: 5rpx;
        }
      }
    }

    .details {
      padding: 15rpx 40rpx;
      line-height: 50rpx;
      color: #3a3a3a;

      .synopsis {
      }

      .certificate {
        margin-top: 30rpx;
      }
    }

    .comment {
      padding: 15rpx 40rpx;
      margin-top: 100rpx;

      .no-comment {
        display: flex;
        flex-direction: column;
        align-items: center;

        .await {
          font-weight: 800;
        }

        .idea {
          font-size: 26rpx;
          color: #9b9b9b;
          margin: 10rpx 0 50rpx;
        }

        .go-comment {
          padding: 20rpx 80rpx;
          background-color: #ececec;
          border-radius: 20rpx;
          font-size: 28rpx;
          transition: all 0.2s;

          &:active {
            background-color: #ececec7a;
          }
        }
      }
    }

    .comment-container {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      // border: 1px solid red;
      display: flex;
      padding: 10rpx 20rpx;
      box-shadow: 0 0 30rpx #e1e1e1;

      .submmit {
        padding: 10rpx 35rpx;
        border-radius: 10rpx;
        background-color: #469ef7;
        // margin-left: 50rpx;
        color: #fff;
        transition: all 0.2s;

        &:active {
          background-color: #469ef770;
        }
      }
    }
  }
}
</style>
